<template>
    <view class="purchaseDetailContainer">
        <!-- 预约/服务中 -->
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'服务评价'">
        </cunstom_navigation_bar>
        <view class="contentBox">
           
            <view class="evaluateBox">
                <view class="bar mr-40">
                    <view class="left">申请数量</view>
                    <view class="right">
                        <uni-easyinput class="uni-input" @input="onKeyInput" placeholder="请输入申请数量" />
                    </view>
                </view>
                <view class="bar mr-40">
                    <view class="left">收货状态</view>
                    <view class="right">
                        <uni-easyinput class="uni-input" @input="onKeyInput" placeholder="请输入收货状态" />
                    </view>
                </view>
                <view class="bar mr-40">
                    <view class="left">申请原因</view>
                    <view class="right">
                        <uni-easyinput class="uni-input" @input="onKeyInput" placeholder="请输入申请原因" />
                    </view>
                </view>
                
                <view class="bottom">
					<view class="title">请选择具体原因</view>
                    <view class="labels">
                        <view v-for="(item,index) in labels" :class="item.selected?'label selected':'label'"
                            @tap="change(index)">
                            {{item.name}}
                        </view>
                    </view>
                </view>
            </view>
			
			
			
			<view class="shenqje">
				<view class="title">申请金额</view>
				<view class="jine">￥3.98</view>
			</view>
			
			<view class="wentms">
				
				<uni-easyinput type="textarea" v-model="evaluateText" placeholder="点击输入您遇到的问题，有助于退款" />
				<uni-file-picker class="img" v-model="uploadImgs" limit="9" file-mediatype="image" :auto-upload="false"
				    @select="selectFile($event)" @delete="deleteFile($event)">
				</uni-file-picker>
			</view>
        </view>



        <view class="zhanwei"></view>
		
        <view class="fixBar">
            <view class="save" @click="save()">
                提交
            </view>
        </view>



    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
                starNum1:0,
                starNum2:0,
                starNum3:0,
                starNum4:0,
                uploadImgs: [],
                imgDomain: "",
                evaluateText: '',
                labels: [
                    {
                        name: '多拍错拍',
                        selected: true
                    },
                    {
                        name: '不想要/买错了',
                        selected: true
                    },
                    {
                        name: '选错自提点',
                        selected: false
                    },
                    {
                        name: '不放便取货',
                        selected: false
                    },
                    {
                        name: '不想要/买错了',
                        selected: false
                    },
                    {
                        name: '选错自提点',
                        selected: false
                    }



                ],
                propStyles: {

                    iconSrc: "black",
                    // bgColor: '#FECF01',

                }

            };
        },
        computed: {

        },
        methods: {
            changeStar1(index  ){
                console.log(index);
                this.starNum1 = index+1
            },
            changeStar2(index  ){
                console.log(index);
                this.starNum2 = index+1
            },
            changeStar3(index  ){
                console.log(index);
                this.starNum3 = index+1
            },
            changeStar4(index  ){
                console.log(index);
                this.starNum4 = index+1
            },
            // 毕业照片
            selectFile(chooseImageRes) {
                console.log('response~~~', chooseImageRes)
                const tempFilePaths = chooseImageRes.tempFilePaths;
                uni.uploadFile({
                    url: process.env.VUE_APP_BASE_URL + '/stage-api/wechat/artistInfo/upload', //后端用于处理图片并返回图片地址的接口   
                    filePath: tempFilePaths[0],
                    name: 'file',

                    success: res => {
                        let data = JSON.parse(res.data) //返回的是字符串，需要转成对象格式  
                        // data.data.fileName; data.data.url;
                        this.formData3.educationImgs.push(
                            {
                                name: data.data.name,
                                uuid: data.data.name,
                                extname: "jpg",
                                cloudPath: data.data.fileName,
                                fileType: "image",
                                url: data.data.url,
                                // image: { "width": 580, "height": 773, "location": data.data.url },
                                path: data.data.url, "progress": 0, "status": "ready"
                            }
                        );
                    },
                    fail: (err) => {
                        console.log("err", err);
                    }
                })
            },
            deleteFile(e) {
                console.log(" e.tempFilePath:" + e.tempFile.name);
                // this.formData3.educationImgs.map((item, i) => {
                // 	if (item.name == e.tempFile.name) {
                // 		this.formData.educationImgs.splice(i, 1)
                // 	}
                // })
            },
            // 相关证书
            goBack() {

                uni.navigateBack()
            },
            change(index) {
                this.labels[index].selected = !this.labels[index].selected
            },

            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({

                        url: `/page_changeAddress/changeAddress?id=${this.defaultAddress.id}&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_addressEdit/addressEdit?id=null&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 3) {
                    uni.navigateTo({
                        url: `/page_protocol/protocol`,
                    })
                }

            },








            goback() {
                console.log("回去");
                uni.navigateBack();
            },


        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },


        onLoad: function (option) {



            this.imgDomain = process.env.VUE_APP_BASE_URL;




        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .contentBox {
        
        .evaluateBox {
            width: 750rpx;
            min-height: 764rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            display: flex;
            flex-direction: column;
            padding-top: 34rpx;
            align-items: center;
			margin-top: 5rpx;
        }

        .mr-40 {
            margin-bottom: 40rpx;
        }

        .bar {
            padding-left: 30rpx;
            padding-right: 98rpx;
            display: flex;
            justify-content: space-between;
            width: 100%;

            .left {
                font-size: 32rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				/* 文字垂直居中的关键 */
				display: flex; /* 将.item也设为Flex容器 */
				align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
            }

            .right {
                display: flex;

                image {
                    width: 38rpx;
                    height: 38rpx;
                    margin-right: 30rpx;
                }
            }
        }

        .title {
            width: 100%;
            text-align: center;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 400;
            font-size: 28rpx;
            color: rgba(51,51,51,0.6);
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
            margin-top: 24rpx;
            margin-bottom: 26rpx;
        }

        .bottom {
            width: 686rpx;
            min-height: 316rpx;
            background: #FBFBFB;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 40rpx 18rpx;

            .labels {
                display: flex;
                margin-bottom: 32rpx;
				flex-wrap: wrap; /* 可选，确保标签在必要时换行到新的一行 */
                .label {
                    padding: 0rpx 24rpx;
                    height: 44rpx;
					width: auto;
                    line-height: 44rpx;
                    background: #FFFFFF;
                    border-radius: 184rpx 184rpx 184rpx 184rpx;
                    border: 1rpx solid rgba(0, 0, 0, 0.1);
                    font-weight: 400;
                    font-size: 24rpx;
                    margin-right: 26rpx;
                    color: rgba(51, 51, 51, 0.8);
					margin-bottom: 20rpx;
                }

                .selected {
                    background: #FECF01;
                    border-radius: 184rpx 184rpx 184rpx 184rpx;
                    border: 1rpx solid rgba(0, 0, 0, 0.1);
                }
            }
        }
		
		.shenqje {
		    margin: 20rpx 0rpx;
		    background: #FFFFFF;
		    width: 750rpx;
		    height: 244rpx;
		    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.15);
		    border-radius: 16rpx 16rpx 16rpx 16rpx;
		    display: flex;
            flex-direction: column;
			padding-left: 30rpx;
			.title{
				width: 178rpx;
				height: 104rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 32rpx;
				color: rgba(51,51,51,0.6);
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-top: 38rpx;
			}
			.jine{
				width: 178rpx;
				height: 104rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 54rpx;
				color: rgba(51,51,51,0.6);
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
			.wentms{
				width: 750rpx;
				height: 428rpx;
				background: #F8F8F8;
				box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.16);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 54rpx;
				color: rgba(51,51,51,0.6);
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				padding: 40rpx 18rpx;
				
				.img{
					width: 140rpx;
					height: 140rpx;
					margin-top: 50rpx;
				}
			}
    }
    .zhanwei{
        width: 750rpx;
        height: 146rpx;
    }

    .fixBar {
        width: 750rpx;
        height: 184rpx;
     
        position: fixed;
        bottom: 0rpx;
        left: 0rpx;
        display: flex;
        align-items: center;
        justify-content: center;




        .save {
            width: 644rpx;
            height: 98rpx;
            background: #FECF01;
            box-shadow: 0rpx 6rpx 10rpx 4rpx rgba(0, 0, 0, 0.07);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            font-weight: 600;
            font-size: 32rpx;
            color: #333333;
            line-height: 98rpx;
            text-align: center;
        }



    }

    /deep/ .is-input-border {
        /* border:none; */
    }
</style>